﻿@page "/Templates"
<h1><FluentIcon Value="@(new Icons.Regular.Size24.Classification())" /> Project templates</h1>

<p>
	To make it easier to start a project that uses the Fluent UI Blazor components out of the box, we have created the <a href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates/">Microsoft.FluentUI.AspNetCore.Templates</a>
	package. The package contains templates for creating a Blazor Web App or Blazor WebAssembly Standalone App. They mimic the standard Blazor templates and
	offer the exact same options (including authentication) when creating a new project either in Visual Studio or with a CLI.
</p>
<p>
	The Fluent UI Blazor library package is already added to the new project and all standard components have been replaced with Fluent UI counterparts 
	(and a few extra have been added). All Bootstrap styling has been removed.</p>
<p>
    The pages you get after creating a project with one of the templates look like this<sup>*</sup>
</p>
<p style="display: flex; flex-direction:column; align-items:center">
	<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-home.png" alt="Home page for site created Fluent UI templates" />
	<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-counter.png" alt="Counter page for site created Fluent UI templates" />
	<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-weather.png" alt="Fetch data page for site created Fluent UI templates" />
</p>
<p><em>*) It depends on the type of project and the choices made during project creation, which pages will be available in the generated app.</em></p>

<blockquote>
<strong>IMPORTANT!!</strong>
<p>Just as with the standard Blazor Web App template, Blazor will use SSR by default. If you want to have interactive components, make sure you add a rendermode to the app, page or component.!</p>
</blockquote>

<h2 id="installation">Installation</h2>
<p>
	Install the templates by running this command:
</p>

<CodeSnippet>dotnet new install Microsoft.FluentUI.AspNetCore.Templates</CodeSnippet>

<p>
	The current version can be found on the <a href="https://www.nuget.org/packages/Microsoft.FLuentUI.AspNetCore.Templates/" rel="noopener noreferrer nofollow">NuGet page</a>.
</p>

<h2 id="usage">Usage</h2>
<p>
	After installing the templates you can create new a project from either the CLI or by using the 'Creating a new project`-dialog in Visual studio 2022.
</p>

<p>
	For creating a new Fluent Blazor Web App project from the CLI:
</p>

<CodeSnippet>dotnet new fluentblazor -o {your project name}</CodeSnippet>

<p>
	For creating a Fluent Blazor WebAssembly Standalone App project from the CLI:
</p>

<CodeSnippet>dotnet new fluentblazorwasm -o {your project name}</CodeSnippet>

<p>
	In Visual Studio you can create a new project by selecting either the 'Fluent Blazor Server App' template or the 'Fluent Blazor WebAssembly Standalone App''
	template in the 'File-&gt;New-&gt;Project'-dialog. It looks like this:
</p>
<p style="display: flex; justify-content:center">
	<img style="border: 1px solid var(--neutral-foreground-focus);" src="_content/FluentUI.Demo.Shared/images/newproject.png" alt="New project dialog with Fluent UI templates" />
</p>

<h3>Blazor Web App details</h3>
<p>
	The rendermode and interactivity choices made when creating an application with the template determine the behavoir of the NavMenu and wether we include the web
	components scrip in <code>App.razor</code>. Starting with v4.2.1 of the templates, the result of that choices are described in the table below:

	<table width="90%">
		<thead>
			<tr>
				<th width="33%">Rendermode / Interactivity</th>
				<th width="33%">NavMenu @@rendermode</th>
				<th width="33%">NavMenu Collapsible</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>SSR / not applicable</td>
				<td>❌</td>
				<td>✅<sup>*</sup></td>
			</tr>
			<tr>
				<td>Server / Global</td>
				<td>❌</td>
				<td>✅</td>
			</tr>
			<tr>
				<td>Server / Per Page</td>
				<td>✅</td>
				<td>✅</td>
			</tr>
			<tr>
				<td>WebAssembly / Global<sup>**</sup></td>
				<td>❌</td>
				<td>✅</td>
			</tr>
			<tr>
				<td>WebAssembly / Per Page<sup>**</sup></td>
				<td>✅</td>
				<td>✅</td>
			</tr>
			<tr>
				<td>Auto / Global<sup>**</sup></td>
				<td>❌</td>
				<td>✅</td>
			</tr>
			<tr>
				<td>Auto / Per Page<sup>**</sup></td>
				<td>✅</td>
				<td>✅</td>
			</tr>
		</tbody>
	</table>
</p>
<p>
	<em>*) For expanding/collapsing items, this uses a JavaScript file that is only active when running in SSR mode.</em><br />
	<em>**) The NavMenu component is located in the Client project.</em>
	</p>

<h2 id="uninstalling-the-templates">Uninstalling the templates</h2>

<p>
	If you want to uninstall the templates, both from the CLI and Visual Studio 2022, run the following command:
</p>

<CodeSnippet>dotnet new uninstall Microsoft.FluentUI.AspNetCore.Templates</CodeSnippet>
